<template>
  <div id="editMetadata">
    <el-container>
      <el-header>
        <div style="">
          <div style="display: inline-block">
            <el-button icon="el-icon-back" size="small" style="font-family: Microsoft YaHei" type="text"
                       @click="goBack">返回
            </el-button>
          </div>
          <div style="display: inline-block">|</div>
          <div style="display: inline-block;">
            <div style="padding-bottom: 15px;margin-left:10px">
              <span style="font-family: Microsoft YaHei;display: inline-block; font-size: 14px;">编辑元数据</span>
            </div>
          </div>
          <div style="border-bottom: solid 1px #C9C9C9;"></div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="180px">
          <div id="menu">
            <MenuItem :item="item" :key="item.name" v-for="item in items" @change-selection="refreshList"></MenuItem>
          </div>
        </el-aside>
        <el-main style="padding: 0px">
          <div style="font-family: PingFangSC-Regular">
            <el-form :inline="true" :model="MetadataForm" :style="{ display: Metadata, height: formStyle}" class="demo-form-inline"
                    >
              <h1 id="Metadata"></h1>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>附注</div>
                  <el-input size="small" class="input-with-select" v-model="MetadataForm.annotation"></el-input>
                </div>
                <div class="inline-block">
                  <div>封面</div>
                  <el-input size="small" class="input-with-select" v-model="MetadataForm.cover"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>所属分类</div>
                  <div class="input-with-select">
                    <el-cascader style="width: 100%;" v-model="MetadataForm.Category" :options="bookSubTagList" filterable clearable
                                 :props="{label: 'name', value: 'id', checkStrictly: true}"/>
                  </div>
                </div>
                <div class="inline-block">
                  <div>版本</div>
                  <el-input size="small" class="input-with-select" v-model="MetadataForm.Edition"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>权限</div>
                  <el-input size="small" class="input-with-select" v-model="MetadataForm.Right"></el-input>
                </div>
                <div class="inline-block">
                  <div>时空范围</div>
                  <el-input size="small" class="input-with-select" v-model="MetadataForm.Coverage"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>语种</div>
                  <el-input size="small" class="input-with-select" v-model="MetadataForm.Language"></el-input>
                </div>
                <div class="inline-block">
                  <div>来源</div>
                  <el-input size="small" class="input-with-select" v-model="MetadataForm.Source"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>唯一标识符</div>
                  <el-input size="small" class="input-with-select" v-model="MetadataForm.Identifier"></el-input>
                </div>
                <div class="inline-block">
                  <div>数字资源类型</div>
                  <el-input size="small" class="input-with-select" v-model="MetadataForm.Type"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>国际标准书号</div>
                  <el-input disabled size="small" class="input-with-select" v-model="MetadataForm.ISBN"></el-input>
                </div>
              </div>
            </el-form>
            <el-form :inline="true" :model="TitlesForm" :style="{ display: Titles, height: formStyle }" class="demo-form-inline"
                     >
              <h1 id="Titles"></h1>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>正题名</div>
                  <el-input size="small" class="input-with-select" v-model="TitlesForm.Main_Title"></el-input>
                </div>
                <div class="inline-block">
                  <div>交替题名</div>
                  <el-input size="small" class="input-with-select" v-model="TitlesForm.Alternative_Title"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div>
                  <div class="inline-block">
                    <div>并列题名</div>
                    <el-input size="small" class="input-with-select" v-model="TitlesForm.Parallel_Title"></el-input>
                  </div>
                  <div class="inline-block">
                    <div>其他题名</div>
                    <el-input size="small" class="input-with-select" v-model="TitlesForm.Other_Title"></el-input>
                  </div>
                </div>
              </div>
            </el-form>
            <el-form :inline="true" :model="SubjectForm" :style="{ display:Subject, height: formStyle}" class="demo-form-inline"
                     >
              <h1 id="Subject"></h1>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>中图号</div>
                  <el-input size="small" class="input-with-select" v-model="SubjectForm.CLC_ClassCode"></el-input>
                </div>
                <div class="inline-block">
                  <div>关键词</div>
                  <el-input size="small" class="input-with-select" v-model="SubjectForm.KeyWords"></el-input>
                </div>
              </div>
            </el-form>
            <el-form :inline="true" :model="DescriptionForm" :style="{ display: Description,height: formStyle}" class="demo-form-inline"
                     >
              <h1 id="Description"></h1>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>资源类型</div>
                  <el-input size="small" class="input-with-select" v-model="DescriptionForm.contentType"></el-input>
                </div>
                <div class="inline-block">
                  <div>内容简介</div>
                  <el-input size="small" class="input-with-select" v-model="DescriptionForm.Introduction"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>其他</div>
                  <el-input size="small" class="input-with-select" v-model="DescriptionForm.Other"></el-input>
                </div>
              </div>
            </el-form>
            <el-form :inline="true" :model="PublisherForm" :style="{ display: Publisher,height: formStyle}" class="demo-form-inline"
                     >
              <h1 id="Publisher"></h1>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>出版者</div>
                  <el-input size="small" class="input-with-select" v-model="PublisherForm.Publisher"></el-input>
                </div>
                <div class="inline-block">
                  <div>出版地</div>
                  <el-input size="small" class="input-with-select" v-model="PublisherForm.Publish_Area"></el-input>
                </div>
              </div>
            </el-form>
            <el-form :inline="true" :model="DateForm" :style="{ display: Date1,height: formStyle}" class="demo-form-inline"
                     >
              <h1 id="Date"></h1>
              <div>
                <div class="block" style="display: inline-block;margin-left: 10px">
                  <div class="demonstration">出版日期</div>
                  <el-date-picker
                    v-model="DateForm.Publish_Date"
                    value-format="yyyy.MM"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
                <div class="block" style="display: inline-block;margin-left: 10px">
                  <div class="demonstration">创建日期</div>
                  <el-date-picker
                    v-model="DateForm.Create_Date"
                    value-format="yyyy.MM.dd"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
              </div>
              <div>
                <div class="block" style="margin-top: 10px;display: inline-block;margin-left: 10px">
                  <div class="demonstration">提交日期</div>
                  <el-date-picker
                    v-model="DateForm.Submit_Date"
                    value-format="yyyy.MM.dd"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
                <div class="block" style="margin-top: 10px;display: inline-block;margin-left: 10px">
                  <div class="demonstration">审核日期 date</div>
                  <el-date-picker
                    v-model="DateForm.Check_Date"
                    value-format="yyyy.MM.dd"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
              </div>
              <div>
                <div class="block" style="margin-top: 10px;display: inline-block;margin-left: 10px">
                  <div class="demonstration">修改日期</div>
                  <el-date-picker
                    v-model="DateForm.Modify_Date"
                    value-format="yyyy.MM.dd"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
                <div class="block" style="margin-top: 10px;display: inline-block;margin-left: 10px">
                  <div class="demonstration">失效日期</div>
                  <el-date-picker
                    v-model="DateForm.Failure_Date"
                    value-format="yyyy.MM.dd"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </div>
              </div>
            </el-form>
            <el-form :inline="true" :model="FormatForm" :style="{ display: Format,height: formStyle}" class="demo-form-inline"
                     >
              <h1 id="Format"></h1>
              <div>
                <div class="inline-block">
                  <div>数字资源格式类</div>
                  <el-input size="small" class="input-with-select" v-model="FormatForm.Format_type"></el-input>
                </div>
                <div class="inline-block">
                  <div>资源载体</div>
                  <el-input size="small" class="input-with-select" v-model="FormatForm.Resource_carrier"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>资源大小</div>
                  <el-input size="small" class="input-with-select" v-model="FormatForm.File_Size"></el-input>
                </div>
                <div class="inline-block">
                  <div>字数</div>
                  <el-input size="small" class="input-with-select" v-model="FormatForm.Words"></el-input>
                </div>
              </div>
                <div style="margin-top: 10px">
                  <div class="inline-block">
                    <div>页数</div>
                    <el-input size="small" class="input-with-select" v-model="FormatForm.Pages"></el-input>
                  </div>
                  <div class="inline-block">
                    <div>开本</div>
                    <el-input size="small" class="input-with-select" v-model="FormatForm.Extent"></el-input>
                  </div>
                </div>
                <div style="margin-top: 10px">
                  <div class="inline-block">
                    <div>图书在版编目数据</div>
                    <el-input size="small" class="input-with-select" v-model="FormatForm.CIP"></el-input>
                  </div>
                  <div class="inline-block">
                    <div>分辨率</div>
                    <el-input size="small" class="input-with-select" v-model="FormatForm.Resolution"></el-input>
                  </div>
                </div>
                <div style="margin-top: 10px">
                  <div>技术环境</div>
                  <el-input size="small" class="input-with-select"
                            v-model="FormatForm.Technical_environment"></el-input>
                </div>
            </el-form>
            <el-form :inline="true" :model="RelationForm" :style="{ display: Relation,height: formStyle}" class="demo-form-inline"
                     >
              <h1 id="Relation"></h1>
              <div>
                <div class="inline-block">
                  <div>丛书名</div>
                  <el-input size="small" class="input-with-select" v-model="RelationForm.Series"></el-input>
                </div>
                <div class="inline-block">
                  <div>前版本</div>
                  <el-input size="small" class="input-with-select" v-model="RelationForm.Formal_Edition"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>后版本</div>
                  <el-input size="small" class="input-with-select"
                            v-model="RelationForm.Other_Related_Resouces"></el-input>
                </div>
                <div class="inline-block">
                  <div>配套光盘</div>
                  <el-input size="small" class="input-with-select" v-model="RelationForm.Attached_Disc"></el-input>
                </div>
              </div>
            </el-form>
            <el-form :inline="true" :model="PriceForm" :style="{ display: Price,height: formStyle}" class="demo-form-inline"
                     >
              <h1 id="Price"></h1>
              <div>
                <div class="inline-block">
                  <div>纸质图书价格</div>
                  <el-input size="small" class="input-with-select" v-model="PriceForm.B_price"></el-input>
                </div>
                <div class="inline-block">
                  <div>数字资源价格</div>
                  <el-input size="small" class="input-with-select" v-model="PriceForm.E_price"></el-input>
                </div>
              </div>
            </el-form>
            <el-form :inline="true" :model="EditorForm" :style="{ display: Editors,height: formStyle}" class="demo-form-inline"
                     >
              <h1 id="Editor"></h1>
              <div>
                <div class="inline-block">
                  <div>策划编辑</div>
                  <el-input size="small" class="input-with-select" v-model="EditorForm.Scheme_Editor"></el-input>
                </div>
                <div class="inline-block">
                  <div>责任编辑</div>
                  <el-input size="small" class="input-with-select" v-model="EditorForm.Commissioning_Editor"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>封面设计</div>
                  <el-input size="small" class="input-with-select" v-model="EditorForm.Cover_Designer"></el-input>
                </div>
                <div class="inline-block">
                  <div>版本设计</div>
                  <el-input size="small" class="input-with-select" v-model="EditorForm.Layout_Disigner"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>责任校队</div>
                  <el-input size="small" class="input-with-select" v-model="EditorForm.Press_Corrector"></el-input>
                </div>
                <div class="inline-block">
                  <div>其他</div>
                  <el-input size="small" class="input-with-select" v-model="EditorForm.Others"></el-input>
                </div>
              </div>
            </el-form>
            <div>
              <el-form :inline="true" :style="{ display: Creators,height: formStyle}" class="demo-form-inline"
                       >
                <el-button size="small" type="success" @click="CreatorsFormVisible  = true">新增</el-button>
                <el-table highlight-current-row :data="CreatorsTableData" :style="{ display: Creators}" border stripe>
                  <el-table-column label="名字" min-width="170" prop="Name">
                    <template slot-scope="scope">
                      <el-input style="width: 150px" v-model="scope.row.Name">
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="角色" min-width="170" prop="Role">
                    <template slot-scope="scope">
                      <el-input style="width: 150px" v-model="scope.row.Role">
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="描述" min-width="200" prop="Institution">
                    <template slot-scope="scope">
                      <el-input style="width: 150px" v-model="scope.row.Institution">
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" min-width="150">
                    <template slot-scope="scope">
                      <span><el-link type="danger"
                                     @click="deleteCreators(scope.$index,scope.row.id)">删除</el-link></span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form>
            </div>
            <div>
              <el-form :inline="true" :style="{ display: Contributors,height: formStyle}" class="demo-form-inline"
                       >
                <el-button size="small" type="success" @click="ContributorFormVisible  = true">新增</el-button>
                <el-table highlight-current-row :data="ContributorTableData" :style="{ display: Contributors}" border stripe>
                  <el-table-column label="名字" min-width="170" prop="Name">
                    <template slot-scope="scope">
                      <el-input style="width: 150px" v-model="scope.row.Name">
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="角色" min-width="170" prop="Role">
                    <template slot-scope="scope">
                      <el-input style="width: 150px" v-model="scope.row.Role">
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="描述" min-width="200" prop="Institution">
                    <template slot-scope="scope">
                      <el-input style="width: 300px" v-model="scope.row.Institution">
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" min-width="150">
                    <template slot-scope="scope">
                      <span><el-link type="danger"
                                     @click="deleteContributor(scope.$index,scope.row.id)">删除</el-link></span>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form>
            </div>
            <el-form :inline="true" :model="MetadataForm" :style="{ display: summary,height: formStyle}"
                     class="demo-form-inline">
              <h1 id="summary"></h1>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>图书简介</div>
                  <el-input v-model="MetadataForm.summary" style="width:400px;" type="textarea"></el-input>
                </div>
              </div>
            </el-form>
          </div>
          <el-dialog title="新增" :visible.sync="CreatorsFormVisible" v-on:close="rest" width="350px">
            <el-form :model="form" style="width: 300px">
              <div>名字</div>
              <el-input size="small" style="width: 300px" v-model="form.name" autocomplete="off"></el-input>
              <div style="margin-top: 10px">角色</div>
              <el-input size="small" style="width: 300px" v-model="form.role" autocomplete="off"></el-input>
              <div style="margin-top: 10px">描述</div>
              <el-input size="small" style="width: 300px" v-model="form.institution" autocomplete="off"></el-input>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button size="small" @click="CreatorsFormVisible = false">取 消</el-button>
              <el-button size="small" type="primary" @click="confirmDialog">确 定</el-button>
            </div>
          </el-dialog>
          <el-dialog title="新增" :visible.sync="ContributorFormVisible" v-on:close="rest" width="350px">
            <el-form :model="form">
              <div>名字</div>
              <el-input size="small" style="width: 300px" v-model="form.name" autocomplete="off"></el-input>
              <div style="margin-top: 10px">角色</div>
              <el-input size="small" style="width: 300px" v-model="form.role" autocomplete="off"></el-input>
              <div style="margin-top: 10px">描述</div>
              <el-input size="small" style="width: 300px" v-model="form.institution" autocomplete="off"></el-input>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button size="small" @click="ContributorFormVisible = false">取 消</el-button>
              <el-button size="small" type="primary" @click="ContributorConfirm">确 定</el-button>
            </div>
          </el-dialog>
        </el-main>
      </el-container>
      <el-footer>
        <div style=" text-align: right" :height="confirmStyle">
          <el-button size="small" type="success" @click="confirm()">确定</el-button>
        </div>
      </el-footer>
    </el-container>
  </div>

</template>

<script>
import MenuItem from "../common/MenuItem";
import Label from "../calculator/exportModel/Label";

export default {
  name: "edit",

  components: {
    Label,
    MenuItem,
  },
  data() {
    return {
      form: {
          name: '',
          role: '',
          institution: '',
        },
        items: [{
          name: '元数据',
          selected: true,
        }, {
          name: '标题',
          selected: false,
        }, {
          name: '主题',
          selected: false,
        }, {
          name: '创作者',
          selected: false,
        }, {
          name: '描述',
          selected: false,
        }, {
          name: '出版者',
          selected: false,
        }, {
          name: '协作者',
          selected: false,
        }, {
          name: '日期',
          selected: false,
        }, {
          name: '数字资源格式',
          selected: false,
        }, {
          name: '相关资源',
          selected: false,
        }, {
          name: '价格',
          selected: false,
        }, {
          name: '编辑',
          selected: false,
        }, {
          name: '简介',
          selected: false,
        }],
        MetadataForm: {},
        TitlesForm: {},
        SubjectForm: {},
        DescriptionForm: {},
        PublisherForm: {},
        FormatForm: {},
        RelationForm: {},
      PriceForm: {},
      EditorForm: {},
      DateForm: {},
      postData: {},
      CreatorsTableData: [],
      ContributorTableData: [],
      Titles: 'none',
      Metadata: '',
      Subject: 'none',
      Description: 'none',
      summary: 'none',
      Publisher: 'none',
      Date1: 'none',
      Format: 'none',
      Relation: 'none',
      Price: 'none',
      Editors: 'none',
      Creators: 'none',
      Contributors: 'none',
      CreatorsFormVisible: false,
      ContributorFormVisible: false,
        formStyle:'',
        confirmStyle:'',
        bookSubTagList: [],
      }
    },
    methods: {
      confirmDialog: function () {
        console.log(this.form)
        if (this.CreatorsFormVisible = true) {
          this.CreatorsTableData.push({
            Name: this.form.name,
            Role: this.form.role,
            Institution: this.form.institution,
          })
          this.CreatorsFormVisible = false
        }
      },
      ContributorConfirm: function () {
        if (this.ContributorFormVisible = true) {
          this.ContributorTableData.push({
            Name: this.form.name,
            Role: this.form.role,
            Institution: this.form.institution,
          })

          this.ContributorFormVisible = false
        }
      },
      rest: function () {
        this.form.name = ''
        this.form.role = ''
        this.form.institution = ''
      },
      confirm: function () {
        for (let i = 0; i < this.CreatorsTableData.length; i++) {
          if (!UTIL.isNotEmpty(this.CreatorsTableData[i].Name)) {
            this.$message.warning("请填写创作者名称")
            return;
          }
        }

        for (let i = 0; i < this.ContributorTableData.length; i++) {
          if (!UTIL.isNotEmpty(this.ContributorTableData[i].Name)) {
            this.$message.warning("请填写协作者名称")
            return;
          }
        }

        this.postData = this.MetadataForm
        let param = new URLSearchParams();
        param.append("data", JSON.stringify(this.postData))
        param.append("id", this.$route.params.id)
        console.log("Metadata: " + JSON.stringify(this.postData));
        this.axios.post('/pmph/action/book/confirm', param)
          .then((response) => {
              this.$router.push("/bookLib")
          })
      },
      contributorAdd: function () {
        this.ContributorTableData.push({
          name: '',
          role: '',
          institution: '',
        })
      },
      creatorsEdit: function (index) {
        this.CreatorsTableData[index].CreatorsNameEnable = false
        this.CreatorsTableData[index].CreatorsRoleEnable = false
        this.CreatorsTableData[index].CreatorsEnable = false
      },
      contributorEdit: function (index) {
        this.ContributorTableData[index].ContributorNameEnable = false
        this.ContributorTableData[index].ContributorRoleEnable = false
        this.ContributorTableData[index].ContributorEnable = false
      },
      add: function () {
        this.CreatorsTableData.push({
          name: '',
          role: '',
          institution: '',
        })
      },
      goBack: function () {
        this.$router.push("/bookLib")
      },
      deleteContributor: function (idx, id) {
        this.$confirm('确定删除？', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (id == null || id === "") {
            this.ContributorTableData.splice(idx, 1)
          }
        })
      },
      deleteCreators: function (idx, id) {
        this.$confirm('确定删除？', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        if (id == null || id === "") {
          this.CreatorsTableData.splice(idx, 1)
        }
        })
      },
      refreshList(item) {
        window.location.href = '#' + item.name;
        this.setAllItemsUnselected();
        this.setSelectedItem(item);
        if (item.name != '元数据') {
          this.Metadata = 'none';
        } else {
          this.Metadata = '';
          this.Subject = 'none';
          this.Titles = 'none';
          this.Description = 'none';
          this.Publisher = 'none';
          this.Contributors = 'none';
          this.Date1 = 'none';
          this.Format = 'none';
          this.Relation = 'none';
          this.Price = 'none';
          this.Editors = 'none';
          this.Creators = 'none';
          this.summary = 'none';
        }
        if (item.name === '主题') {
          this.Metadata = 'none';
          this.Subject = '';
          this.Titles = 'none';
          this.Description = 'none';
          this.Publisher = 'none';
          this.Contributors = 'none';
          this.Date1 = 'none';
          this.Format = 'none';
          this.Relation = 'none';
          this.Price = 'none';
          this.Editors = 'none';
          this.Creators = 'none';
          this.summary = 'none';
        }
        if (item.name === '标题') {
          this.Metadata = 'none';
          this.Subject = 'none';
          this.Titles = '';
          this.Description = 'none';
          this.Publisher = 'none';
          this.Contributors = 'none';
          this.Date1 = 'none';
          this.Format = 'none';
          this.Relation = 'none';
          this.Price = 'none';
          this.Editors = 'none';
          this.Creators = 'none';
          this.summary = 'none';
        }
        if (item.name === '描述') {
          this.Metadata = 'none';
          this.Subject = 'none';
          this.Titles = 'none';
          this.Description = '';
          this.Publisher = 'none';
          this.Contributors = 'none';
          this.Date1 = 'none';
          this.Format = 'none';
          this.Relation = 'none';
          this.Price = 'none';
          this.Editors = 'none';
          this.Creators = 'none';
          this.summary = 'none';
        }
        if (item.name === '出版者') {
          this.Metadata = 'none';
          this.Subject = 'none';
          this.Titles = 'none';
          this.Description = 'none';
          this.Publisher = '';
          this.Contributors = 'none';
          this.Date1 = 'none';
          this.Format = 'none';
          this.Relation = 'none';
          this.Price = 'none';
          this.Editors = 'none';
          this.Creators = 'none';
          this.summary = 'none';
        }
        if (item.name === '日期') {
          this.Metadata = 'none';
          this.Subject = 'none';
          this.Titles = 'none';
          this.Description = 'none';
          this.Publisher = 'none';
          this.Contributors = 'none';
          this.Date1 = '';
          this.Format = 'none';
          this.Relation = 'none';
          this.Price = 'none';
          this.Editors = 'none';
          this.Creators = 'none';
          this.summary = 'none';
        }
        if (item.name === '数字资源格式') {
          this.Metadata = 'none';
          this.Subject = 'none';
          this.Titles = 'none';
          this.Description = 'none';
          this.Publisher = 'none';
          this.Contributors = 'none';
          this.Date1 = 'none';
          this.Format = '';
          this.Relation = 'none';
          this.Price = 'none';
          this.Editors = 'none';
          this.Creators = 'none';
          this.summary = 'none';
        }
        if (item.name === '相关资源') {
          this.Metadata = 'none';
          this.Subject = 'none';
          this.Titles = 'none';
          this.Description = 'none';
          this.Publisher = 'none';
          this.Contributors = 'none';
          this.Date1 = 'none';
          this.Format = 'none';
          this.Relation = '';
          this.Price = 'none';
          this.Editors = 'none';
          this.Creators = 'none';
          this.summary = 'none';
        }
        if (item.name === '价格') {
          this.Metadata = 'none';
          this.Subject = 'none';
          this.Titles = 'none';
          this.Description = 'none';
          this.Publisher = 'none';
          this.Contributors = 'none';
          this.Date1 = 'none';
          this.Format = 'none';
          this.Relation = 'none';
          this.Price = '';
          this.Editors = 'none';
          this.Creators = 'none';
          this.summary = 'none';
        }
        if (item.name === '编辑') {
          this.Metadata = 'none';
          this.Subject = 'none';
          this.Titles = 'none';
          this.Description = 'none';
          this.Publisher = 'none';
          this.Contributors = 'none';
          this.Date1 = 'none';
          this.Format = 'none';
          this.Relation = 'none';
          this.Price = 'none';
          this.Editors = '';
          this.Creators = 'none';
          this.summary = 'none';
        }
        if (item.name === '创作者') {
          this.Metadata = 'none';
          this.Subject = 'none';
          this.Titles = 'none';
          this.Description = 'none';
          this.Publisher = 'none';
          this.Contributors = 'none';
          this.Date1 = 'none';
          this.Format = 'none';
          this.Relation = 'none';
          this.Price = 'none';
          this.Editors = 'none';
          this.Creators = '';
          this.summary = 'none';
        }
        if (item.name === '协作者') {
          this.Metadata = 'none';
          this.Subject = 'none';
          this.Titles = 'none';
          this.Description = 'none';
          this.Publisher = 'none';
          this.Contributors = '';
          this.Date1 = 'none';
          this.Format = 'none';
          this.Relation = 'none';
          this.Price = 'none';
          this.Editors = 'none';
          this.Creators = 'none';
          this.summary = 'none';
        }
        if (item.name === '简介') {
          this.Metadata = 'none';
          this.Subject = 'none';
          this.Titles = 'none';
          this.Description = 'none';
          this.Publisher = 'none';
          this.Contributors = 'none';
          this.Date1 = 'none';
          this.Format = 'none';
          this.Relation = 'none';
          this.Price = 'none';
          this.Editors = 'none';
          this.Creators = 'none';
          this.summary = '';
        }
      },
      setAllItemsUnselected() {
        this.items.forEach(item => {
          item.selected = false;
        });
      },
      setSelectedItem(selectedItem) {
        this.items.forEach(item => {
          if (item.name === selectedItem.name) {
            item.selected = true;
          }
        });
      },
      handleToTopClick() {
        window.location.href = '#top';
        this.setAllItemsUnselected();
        this.setSelectedItem(this.items[0]);
      },
    },
    created() {
      this.formStyle = CONST.WORKSPACE_HEIGHT - 130 + 'px'
      this.confirmStyle = CONST.WORKSPACE_HEIGHT - 130
      this.MetadataForm = this.$route.params.metadata
      this.TitlesForm = this.MetadataForm.Titles
      this.SubjectForm = this.MetadataForm.Subject
      this.DescriptionForm = this.MetadataForm.Description
      this.PublisherForm = this.MetadataForm.Publisher
      this.FormatForm = this.MetadataForm.Format
      this.DateForm = this.MetadataForm.Date
      this.RelationForm = this.MetadataForm.Relation
      this.PriceForm = this.MetadataForm.Price
      this.EditorForm = this.MetadataForm.Editors
      this.CreatorsTableData = this.MetadataForm.Creators.Creator
      this.ContributorTableData = this.MetadataForm.Contributors.Contributor
      this.axios.get('/pmph/action/tag/selectBookSubTagTree').then((response) => {
        this.bookSubTagList = response.data
      })
    }
  }
</script>

<style scoped>
  #menu {
    margin-top: 15px;
  }
  .input-with-select {
    width: 320px;
    margin-top: 10px
  }
  /deep/ .el-input__inner {
    height: 32px;
  }
  .inline-block {
    display: inline-block;
    margin-left: 10px;
  }
</style>
